import {
    Text, View, Button, Image
} from 'react-native';
import { useLayoutEffect } from 'react';
import { AntDesign } from '@expo/vector-icons';


// 配置路由的组件中被注入 navigation 对象，用于跳转
// navigation
// navigate
// replace 
// push
// pop
// popToTop
// {route:{params}}解构两层显得麻烦了
const Detail = ({ route, navigation }) => {
    // useLayoutEffect会在useEffect之前执行，要从react中引入
    // 想最终呈现DOM组件中有单独的设置，可以在useLayoutEffect中进行，
    // 提前设置好，防止出现闪烁的样子，有动画，动作看的话，可以在渲染之前先配置好，在useLayoutEffec之后才是呈现出来的效果
    useLayoutEffect(() => {
        navigation.setOptions({
            title: route.params.id,
            headerLeft: () => {
                return <Image
                    source={require('../assets/favicon.png')}
                />
            },
            // headerTitle: () => {
            //     return <Button title='center' />
            // },
            headerRight: () => {
                return <AntDesign name="setting" size={24} color="black" />
            },
            headerBackVisible: true
        })
    }, [])
    return <View>
        <Button
            title='详情页'
            onPress={() => {
                // Detail是下面Stack.Screen中的name名字
                // push在堆栈中往后追加，
                // 用一般的navigation不是追加，是直接跳转到第一个
                // 而push是传的数据不一样需要继续追加，返回的时候跳回去上次那个
                navigation.push('Detail', { id: 888 });
            }}
        />
        <Button
            title='go Detail'
            onPress={() => {
                // 用一般的navigation不是追加，是直接跳转到第一个
                // navigate是直接跳到第一次出现详情的页面
                navigation.navigate('Detail', { id: 888 });
            }}
        />
        <Text>详情页{route.params.id}</Text>
    </View>
}
export default Detail;